<!DOCTYPE html>
<html>

<head lang="en">
    <title>找攻略</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap/css/bootstrap.min.css">
    <script src="/js/plugins/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/strategyComment.css"/>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="css/zyd.comment.css" rel="stylesheet" type="text/css">
    <link href="css/wangEditor-fullscreen-plugin.css" rel="stylesheet" type="text/css">
    <script src="/js/plugins/jrender/jrender.js"></script>
    <link rel="stylesheet" href="/js/plugins/jquery-confirm/css/jquery-confirm.css">
    <script src="/js/plugins/jquery-confirm/js/jquery-confirm.js"></script>
    <script src="/js/common.js"></script>
    <script src="/js/plugins/jquery-form/jquery.form.js"></script>
    <script src="js/plugins/dialog/dialog.min.js"></script>


</head>

<body>
<div class="search-head">
    <div class="row nav-search">
        <div class="col">
            <!--<a href="/index.html">-->
            <a href="javascript:history.go(-1)">
                <span><i class="fa fa-chevron-left"></i></span>
            </a>
        </div>
        <div class="col">
            <span>点评详情</span>
        </div>
        <div class="col"></div>
    </div>
</div>

<div class="comment" id="comment">

    <div class="container ">
        <div class="row">
            <div class="col-2 comment-head">
                <a href="userProfiles.html" data-id="43">
                    <img class="rounded-circle" render-src="list.user.headImgUrl">
                </a>
                <button class="btn" id="followBtn"><i class="fa fa-hand-o-right"> </i> 关注</button>
            </div>
            <div class="col">
                <p class="authorName"><span render-html="user.nickName"></span></p>
                <span class="comment-star" render-fun="star" render-key="id">
                            <!--动态回显星星的地方-->
                        	</span>
                <span class="comment-date">2018-07-11</span>
                <div class="comment-content" render-html="comment">
                    <p></p>
                </div>
                <ul class="comment-img">
                    <li>
                        <img render-src="coverUrl">
                    </li>
                </ul>

                <!--<div class="comment-link">-->
                    <!--<a render-fun="hand" render-key="travel.id">-->

                        <!--<img render-src="travel.coverUrl"> <span render-html="travel.title">广州攻略</span>-->
                        <!--<i class="fa fa-angle-right fa-2x"></i>-->
                    <!--</a>-->
                <!--</div>-->

            </div>
        </div>
    </div>

    <div class="count d-flex justify-content-between">
        <div class="p-2" id="commentCount">评论<span render-html="count">0</span></div>
    </div>

</div>


<!-- 评论 -->
<div class="commentList">
    <div render-loop="list">
        <ul class="comment">
            <li>
                <div class="comment-body" id="comment-1">
                    <div class="cheader">
                        <a target="_blank">
                            <img class="userImage" render-src="list.author.headImgUrl">
                            <strong render-html="list.author.nickName"></strong>
                        </a>
                        <div class="timer" render-html="list.createTime">
                            <i class="fa fa-clock-o fa-fw"></i>2018-01-01 14:14:14
                        </div>
                    </div>
                    <div class="content" render-html="list.content">
                        <a href="#comment-5" class="comment-quote">@钱五</a>
                        有人在车上分娩，有人在地铁怀孕，北京真是个充满生机的城市…
                    </div>
                    <!--<div class="sign">
                        <a href="#comment-1" class="comment-reply" onclick="$.comment.reply(1, this)"><i class="fa fa-reply fa-fw"></i>回复</a>
                    </div>-->
                </div>
            </li>

        </ul>
    </div>
</div>


<div class="comment-list">
    快来发表你的评论吧
</div>

<div class="operation">
    <div class="d-flex justify-content-between">
        <div class="p-2"><i class="fa fa-commenting-o"></i> <a id="mybutton">添加你的评论</a></div>
        <div class="p-2"><i class="fa fa-star-o"></i> 收藏</div>
    </div>
</div>
</div>


<!-- 评价模态框 -->
<div id="inputModal" class="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">编辑</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" method="post" id="infoForm">
                    <input type="hidden" name="author.id" id="authorId">
                    <input type="hidden" name="commentId" id="commentId">
                    <textarea name="content" class="form-control" rows="5" placeholder="请填写你对该旅游地的评价"></textarea>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary submitBtn">保存</button>
            </div>
        </div>
    </div>
</div>


<script>
    $(function () {
        var id = getParams().id;
        var currentPage = 1;
        var pages;
        var comment;

        var user = getUser();

        $("#mybutton").click(function () {
            console.log("aaaaa");
            $("#inputModal").modal("show");
        });


        $.get("/travels/travelComment/" + id, {id: id}, function (data) {
            console.log(data);

            $("#comment").renderValues(data, {
                hand: function (ele, value) {

                    ele.href = "/travelContent.html?id=" + value;
                },
                star: function (ev, val) {
                    $(ev).attr("id", "star" + val);
                    console.log(ev);
                }
            });

            creatStart(data.state * 2, data.id);


        })


        function creatStart(count, id) {
            var star = $("  <i class=\"fa fa-star-o\"></i>\n" +
                "                            <i class=\"fa fa-star-o\"></i>\n" +
                "                            <i class=\"fa fa-star-o\"></i>\n" +
                "                            <i class=\"fa fa-star-o\"></i>\n" +
                "                            <i class=\"fa fa-star-o\"></i>");
            for (var i = 0; i < count; i++) {
                var s = star[i];
                $(s).removeClass("fa-star-o")
                $(s).addClass("fa fa-star");
            }
            $(star).appendTo("#star" + id + "");
        }

        $(".submitBtn").click(function () {
            console.log(111);
            if ($(".form-control").val() != null && $(".form-control").val() != "") {
                $("#authorId").val(user.id);
                $("#commentId").val(id);
                $("#infoForm").ajaxSubmit({
                    url: "/travels/travelDiscuss",
                    success: function (data) {
                        window.location.reload();
                    }
                })
            } else {
                alert("内容不能为空");
            }
        })


        $.get("/travels/travelDiscuss/" + id, {id: id}, function (data) {
            pages = data.pages;
            comment = data.list;
            console.log(data);
            $(".commentList").renderValues(data);

        })


        $(window).scroll(function () {
            if (isFull()) {
                if (currentPage < pages) {
                    $.get("/travels/travelDiscuss/" + id, {currentPage: ++currentPage, id: id}, function (data) {
                        $.merge(comment, data.list);
                        $(".commentList").renderValues({list: comment});
                    })
                } else {
                    $(document).dialog({
                        type: "notice",
                        autoClose: 2500,
                        position: "bottom"  // center: 居中; bottom: 底部
                    });
                }
            }
        })


        $.get("/travels/travelDiscuss/count/" + id, {commentId: id}, function (data) {
            console.log(data);

            $("#commentCount").renderValues({count: data});

        })
    })

</script>
</body>

</html>